<template>
  <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <van-grid square class="category">
          <van-grid-item v-for="item in catagoryOne" :key="item.id" @click="gotoFood(item)">
            <van-image
              class="image"
              width="50"
              height="50"
              fit="cover"
              :src="item.image_url"
            />
            <p class="text">{{ item.title }}</p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid square class="category">
          <van-grid-item v-for="item in catagoryTow" :key="item.id"  @click="gotoFood(item)" >
            <van-image
              class="image"
              width="50"
              height="50"
              fit="cover"
              :src="item.image_url"
            />
            <p class="text">{{ item.title }}</p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
</template>

<script setup>
import { computed, defineProps } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  category: {
    type: Array,
    default: () => ([])
  }
})

// 轮播图数据
const catagoryOne = computed(() => {
  return props.category.filter((item, index) => index < 8 ? item : '')
})
const catagoryTow = computed(() => {
  return props.category.filter((item, index) => index > 7 ? item : '')
})

// 跳转至商铺列表
const router = useRouter()
const gotoFood = item => {
  router.push({
    path: '/food',
    query: {
      title: item.title,
      id: item.id
    }
  })
}
</script>

<style scoped lang="less">
.my-swipe {
    height: 400px;
    margin-bottom: 20px;
    background-color: #fff;
    :deep(.van-swipe__indicator) {
      background-color: #000;
    }
    :deep(.van-swipe__indicator--active) {
      background-color: #0a92e7 !important
    }
    .category {
      :deep([class*=van-hairline]:after) {
        border: none;
      }
      :deep(.van-grid-item__content) {
        padding: 0;
      }
      .image {
        margin-bottom: 20px;
      }
      .text {
        color: #666;
        font-size: 26px;
        text-align: center;
      }
    }
    :deep(.van-swipe__indicators) {
      bottom: 14px;
    }
  }
</style>
